<template>
  <el-container class="forum-page">
    <el-header class="header">
      <h2>论坛帖子列表</h2>
    </el-header>

    <el-main>
      <!-- 全局置顶帖 -->
      <el-card v-for="post in globalPinnedPosts" :key="post.id" class="post-card global-pinned">
        <div class="post-header">
          <el-tag type="danger">全局置顶</el-tag>
          <h3>{{ post.title }}</h3>
        </div>
        <p>{{ post.content }}</p>
        <small>作者: {{ post.author }} | 最后回复: {{ post.lastReply }}</small>
      </el-card>

      <!-- 本版置顶帖 -->
      <el-card v-for="post in sectionPinnedPosts" :key="post.id" class="post-card section-pinned">
        <div class="post-header">
          <el-tag type="warning">本版置顶</el-tag>
          <h3>{{ post.title }}</h3>
        </div>
        <p>{{ post.content }}</p>
        <small>作者: {{ post.author }} | 最后回复: {{ post.lastReply }}</small>
      </el-card>

      <!-- 普通帖子列表 -->
      <el-card v-for="post in normalPosts" :key="post.id" class="post-card">
        <div class="post-header">
          <h3>{{ post.title }}</h3>
        </div>
        <p>{{ post.content }}</p>
        <small>作者: {{ post.author }} | 最后回复: {{ post.lastReply }}</small>
      </el-card>

      <!-- 分页器 -->
      <el-pagination
          layout="prev, pager, next"
          :total="totalPosts"
          :page-size="pageSize"
          v-model:current-page="currentPage"
          @current-change="fetchPosts"
      />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 模拟帖子数据
const posts = ref([
  { id: 1, title: '多版块联合活动 | 激励计划', content: '活动详情...', author: '小天吖~', lastReply: '17 小时前', type: 'global-pinned' },
  { id: 2, title: '苦力怕论坛总坛规', content: '总坛规...', author: '苦力怕纸', lastReply: '2022-10-5', type: 'global-pinned' },
  { id: 3, title: '[版本发布] Minecraft Java 版 1.21.3 发布', content: '版本详情...', author: 'M397749490', lastReply: '5 天前', type: 'section-pinned' },
  { id: 4, title: 'Minecraft Experience 开放探险', content: '新活动...', author: 'M397749490', lastReply: '前天 19:27', type: 'normal' },
  { id: 5, title: 'Minecraft Java版 1.21.2-rc1 发布', content: '版本详情...', author: 'M397749490', lastReply: '2024-10-18', type: 'normal' },
  // 添加更多帖子数据...
]);

// 分页和帖子分类逻辑
const pageSize = 10;
const currentPage = ref(1);
const totalPosts = posts.value.length;

const globalPinnedPosts = computed(() => posts.value.filter(post => post.type === 'global-pinned'));
const sectionPinnedPosts = computed(() => posts.value.filter(post => post.type === 'section-pinned'));
const normalPosts = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return posts.value.filter(post => post.type === 'normal').slice(start, end);
});

function fetchPosts(page) {
  currentPage.value = page;
}
</script>

<style scoped>
.forum-page {
  padding: 20px;
}

.header h2 {
  margin: 0;
}

.post-card {
  margin-bottom: 20px;
  padding: 10px;
}

.global-pinned {
  border: 2px solid #ff4d4f;
}

.section-pinned {
  border: 2px solid #ffa940;
}

.post-header {
  display: flex;
  align-items: center;
}

.post-header h3 {
  margin: 0 0 0 8px;
}
</style>
